<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr = [
        {title:'小米14',price:8000,num:200},
        {title:'华为Mate60',price:5000,num:100},
        {title:'苹果16',price:10000,num:700},
        {title:'魅族',price:2000,num:600}
    ];
    for (let n of productArr){
        // 找到 table元素
        var table = document.querySelector('table');
        // 创建 tr和td元素
        var tr = document.createElement('tr');
        var titleTd = document.createElement('td');
        var priceTd = document.createElement('td');
        var numTd = document.createElement('td');
        titleTd.innerHTML = n.title;
        priceTd.innerHTML = n.price;
        numTd.innerHTML = n.num;
        tr.append(titleTd,priceTd,numTd);
        table.append(tr);
    }
</script>
</body>
</html>